<template>
  <div class="association">
    <Header_h />
    <div class="sq_box_content">
      <div class="assistance">
        <img class="assistance_bannder" :src="zlt_bg" alt />
        <div class="container">
          <div class="assistance_banner_h">
            <div class="s_banner">
              <h3 class="sq_tilte1">海外智联体</h3>
              <div class="line"></div>
              <p class="sq_content content_color line_h_26">
                收集整理全球主要国家的知识产权制度及实务操作指南，以国别、制度、操作指引、律师函等要素为基础，建立分类分级检索窗口，宣传和展示海外服务能力，方便企业精准获悉海外制度。
              </p>
            </div>
          </div>
          <div
            class="
              s_flex s_justify_content_between s_align_items_center
              association_box
            "
          >
            <div class="association_left sq_xl">
              <div
                class="
                  s_flex s_justify_content_between s_align_items_center
                  association_left_h 
                "
              >
                <h4 class="ft_weight_800 sq_tilte3 sq_active">
                  {{ countryName ? countryName : "美国" }}知识产权事务所
                </h4>
                <span class="ft_weight_800 sq_tilte3 sq_active"
                  >（共{{ list.length > 0 ? list.length : 0 }}家）</span
                >
              </div>
              <div
                class="association_left_info"
                v-for="(item, index) in list"
                :key="index"
                @click="
                  $router.push({
                    path: '/association/details',
                    query: { id: item.id },
                  })
                "
              >
                <div class="s_flex s_align_items_center">
                  <div>
                    <el-tag
                      v-if="item.tag"
                      size="small"
                      class="tag_right"
                      effect="plain"
                      >{{ item.tag }}</el-tag
                    >
                  </div>
                  <div class="sq_tilte3 ft_weight_800 sq_tilte_color line_h_26">
                    {{ item.company }}
                  </div>
                </div>
                <div class="sq_content_color sq_content line_h_26">
                  <p>邮箱：{{ item.email }}</p>
                  <p>网址：{{ item.web_url }}</p>
                  <p>地址：{{ item.address }}</p>
                </div>
                <div
                  class="sq_sign_btn sq_content sq_sign_btn3"
                  @click.stop="getUrl(item)"
                >
                  立即联系>
                </div>
              </div>
            </div>
            <div class="association_right">
              <img src="@/assets/web/zlt_img2.png" alt />
              <div
                v-for="(item, index) in country"
                :key="index"
                :class="`spinner${index + 1} sq_xl`"
                @click="getCountryId(item)"
              >
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="`${item.name}共${item.num}家服务机构`"
                  placement="top"
                >
                  <div class="double-bounce1"></div>
                  <div class="double-bounce2"></div>
                  {{ item.name }}
                </el-tooltip>
              </div>
            </div>
            <div class="association_country sq_xs">
              <el-select
                v-model="value"
                @change="dialogChange"
                clearable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in country"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
          </div>
        </div>
        <!-- <div class="wipo">
          <div class="sq_sign_btn sq_sign_btn3">WIPO</div>
        </div> -->
      </div>
      <!-- <div class="assistance sq_xs session_top">
        <div class="container">
          <div class="s_banner s_flex s_justify_content_center s_flex-column">
            <h3 class="sq_tilte1">海外智联体</h3>
            <p class="line"></p>
            <p class="sq_content content_color line_h_26">
              收集整理全球主要国家的知识产权制度及实务操作指南，以国别、制度、操作指引、律师函等要素为基础，建立分类分级检索窗口，宣传和展示海外服务能力，方便企业精准获悉海外制度。
            </p>
          </div>
          <el-tabs
            style="margin-top: 20px"
            v-model="activeName"
            @tab-click="handleClick"
          >
            <el-tab-pane
              v-for="(item, index) in country"
              :key="index"
              :label="item.name"
              :name="`${item.id}`"
            >
              <div class="association_left">
                <div
                  class="
                    s_flex s_justify_content_between s_align_items_center
                    association_left_h
                  "
                >
                  <h4 class="ft_weight_800 sq_tilte3 sq_active">
                    {{ countryName ? countryName : "美国" }}知识产权事务所
                  </h4>
                  <span class="ft_weight_800 sq_tilte3 sq_active"
                    >（共{{ list.length > 0 ? list.length : 0 }}家）</span
                  >
                </div>
                <div
                  class="association_left_info"
                  v-for="(item, index) in list"
                  :key="index"
                  @click="
                    $router.push({
                      path: '/association/details',
                      query: { id: item.id },
                    })
                  "
                >
                  <div class="s_flex s_align_items_center">
                    <div>
                      <el-tag
                        v-if="item.tag"
                        size="small"
                        class="tag_right"
                        effect="plain"
                        >{{ item.tag }}</el-tag
                      >
                    </div>
                    <div
                      class="sq_tilte3 ft_weight_800 sq_tilte_color line_h_26"
                    >
                      {{ item.company }}
                    </div>
                  </div>
                  <div class="sq_content_color sq_content line_h_26">
                    <p>邮箱：{{ item.email }}</p>
                    <p>网址：{{ item.web_url }}</p>
                    <p>地址：{{ item.address }}</p>
                  </div>
                  <div
                    class="sq_sign_btn sq_content"
                    @click.stop="getUrl(item)"
                  >
                    立即联系>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>-->
      <div class="session_top">
        <div class="container">
          <div class="s_banner s_flex s_justify_content_center s_flex-column">
            <h3 class="sq_tilte1">国际维权咨询</h3>
            <p class="line"></p>
            <p class="sq_content content_color line_h_26 w_600">
              构建中心的专业化团队，给予企业专业化的在线咨
              询服务和构建合理化的解决方案，并代理企业以区域服务中心的角色与海外地区优质知识产权代理机构建立合作机制，为区内企业应对知识产权纠纷提供全程跟踪服务。
            </p>
            <div class="sq_sign_btn btn_mr sq_sign_btn3" @click="getServe">
              联系我们
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer />
    <rightMenu @moveTo="moveTo" />
    <signUp
      :dialogVisible="dialogVisible"
      :type="type"
      @handleClose="handleClose"
      @submit="submit"
      :text="text"
    />

    <el-dialog
      :visible.sync="dialogStatus"
      width="30%"
      :before-close="beforeClose"
    >
      <div class="association_left">
        <div
          class="
            s_flex s_justify_content_between s_align_items_center
            association_left_h
          "
        >
          <h4 class="ft_weight_800 sq_tilte3 sq_active">
            {{ countryName ? countryName : "美国" }}知识产权事务所
          </h4>
          <span class="ft_weight_800 sq_tilte3 sq_active"
            >（共{{ list.length > 0 ? list.length : 0 }}家）</span
          >
        </div>
        <div
          class="association_left_info"
          v-for="(item, index) in list"
          :key="index"
          @click="
            $router.push({
              path: '/association/details',
              query: { id: item.id },
            })
          "
        >
          <div class="s_flex s_align_items_center">
            <div>
              <el-tag
                v-if="item.tag"
                size="small"
                class="tag_right"
                effect="plain"
                >{{ item.tag }}</el-tag
              >
            </div>
            <div class="sq_tilte3 ft_weight_800 sq_tilte_color line_h_26">
              {{ item.company }}
            </div>
          </div>
          <div class="sq_content_color sq_content line_h_26">
            <p>邮箱：{{ item.email }}</p>
            <p>网址：{{ item.web_url }}</p>
            <p>地址：{{ item.address }}</p>
          </div>
          <div class="sq_sign_btn sq_content" @click.stop="getUrl(item)">
            立即联系>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Header_h from "@/components/Header_h";
import Footer from "@/components/Footer";
import { overseassmartList, consultAdd } from "@/api/web";
import { WebGetCountry } from "@/api/admin";
import signUp from "@/components/web/signUp";
import rightMenu from "@/components/web/rightMenu";
import { PAGE_BASE_URL } from "@/config";

export default {
  components: {
    Header_h,
    Footer,
    signUp,
    rightMenu,
  },
  data() {
    return {
      list: [],
      country: [],
      countryId: "39",
      type: 7,
      countryName: "",
      dialogVisible: false,
      dialogStatus: false,
      activeName: "39",
      text: {
        title: "咨询",
        btn: "立即咨询",
      },
      zlt_bg:
        document.documentElement.clientWidth <= 750
          ? require("@/assets/web/m_zlt_bg.png")
          : require("@/assets/web/zlt_bg.png"),
      value: "",
    };
  },
  mounted() {
    this.getCountry();
    this.getList();
  },
  methods: {
    handleClick(e) {
      this.countryId = e.name;
      this.countryName = e.label;
      this.getList();
    },
    moveTo() {
      window.scrollTo(0, 0);
    },
    async getCountry() {
      this.country = await WebGetCountry({ type: 4 });
    },
    async dialogChange(e) {
      this.list = await overseassmartList({ country: this.value });
      this.countryName = this.country.filter(
        (item) => item.id == this.value
      )[0].name;
      this.dialogStatus = true;
    },
    async getList() {
      try {
        this.list = await overseassmartList({ country: this.countryId });
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    getCountryId(item) {
      this.countryId = item.id;
      this.countryName = item.name;
      this.getList();
    },
    async submit(form) {
      try {
        await consultAdd({
          ...form,
          from: this.url,
        });
        this.$message.success("提交成功");
      } catch (error) {
        this.$message.error(error.message);
      }
      this.dialogVisible = false;
    },
    getUrl(item) {
      this.text = {
        title:
          "请填写您的联系方式，我们工作人员将尽快与您联系，将为您提供“" +
          item.company +
          "”相关咨询服务。",
        btn: "提交",
      };
      // this.url = this.$route.fullPath;
      // console.log(item);
      this.type = 1;
      this.url = `${PAGE_BASE_URL}/#/association/details?id=${item.id}`;
      this.dialogVisible = true;
    },
    getServe() {
      this.type = 2;
      this.url = `${PAGE_BASE_URL}/#/web/overseas/association`;
      this.dialogVisible = true;
    },
    async handleClose() {
      this.dialogVisible = false;
    },
    beforeClose() {
      this.dialogStatus = false;
    },
  },
};
</script>

<style lang="less" scoped>
.assistance {
  position: relative;
  img {
    width: 100%;
  }
  .wipo {
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
  }
  .assistance_banner_h {
    position: absolute;
    top: 4%;
    width: 1200px;
    text-align: center;
    p {
      width: 600px;
      margin: 0 auto;
    }
  }
}
.s_banner {
  text-align: center;
  h3 {
    // width: 144px;
    font-weight: 400;
    color: #0c0c0d;
  }
  .line {
    width: 51px;
    height: 2px;
    background: var(--color);
    margin: 30px auto 22px;
    display: inline-block;
  }
}
.w_600 {
  width: 600px;
  margin: 0 auto;
}
.btn_mr {
  margin: 30px auto 60px;
}

.association_box {
  width: 1200px;
  position: absolute;
  top: 23%;
}
.association_left {
  width: 37%;
  height: 477px;
  background: #fbfdff;
  box-shadow: 3px 1px 21px 0px rgba(24, 76, 171, 0.26);
  border-radius: 10px;
  padding: 20px 30px;
  overflow: auto;
  .association_left_h {
    padding-bottom: 20px;
    border-bottom: 1px solid #e1e7ff;
  }
}
.association_right {
  width: 60%;
  position: relative;
  .spinner1 {
    position: absolute;
    top: 25%;
    left: 68%;
  }
  .spinner2 {
    position: absolute;
    top: 18%;
    left: 6%;
  }
  .spinner3 {
    position: absolute;
    top: 73%;
    left: 52%;
  }
  .spinner4 {
    position: absolute;
    top: 11%;
    left: 24.5%;
  }
  .spinner5 {
    position: absolute;
    top: 61%;
    left: 80%;
  }
  .spinner6 {
    position: absolute;
    top: 29%;
    left: 51%;
  }
  .spinner7 {
    position: absolute;
    top: 28%;
    left: 48%;
  }
  .spinner8 {
    position: absolute;
    top: 54%;
    left: 45%;
  }
  .spinner9 {
    position: absolute;
    top: 41%;
    left: 32%;
  }
  .spinner10 {
    position: absolute;
    top: 46%;
    left: 13%;
  }
  .spinner11 {
    position: absolute;
    top: 37%;
    left: 47.5%;
  }
  .spinner12 {
    position: absolute;
    top: 39%;
    left: 44.5%;
  }
  .spinner13 {
    position: absolute;
    height: 20px;
    width: 20px;
    top: 41%;
    left: 22%;
  }
}
.tag_right {
  margin-right: 20px;
}
.association_left_info {
  padding: 20px 0;
  border-bottom: 1px solid #e1e7ff;
  &:last-child {
    border-bottom: 0;
  }
  div {
    margin-bottom: 10px;
    &div:last-child {
      margin-bottom: 0;
    }
  }
}
/*滚动条样式*/
.association_left::-webkit-scrollbar {
  width: 4px;
  /*height: 4px;*/
}
.association_left::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #205ffc;
}
.association_left::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}

.association_country {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translate(-50%);
}

@media (max-width: 1660px) {
  .association_box {
    top: 28%;
  }
  .association_box .association_left {
    height: 400px;
  }
}

@media (max-width: 1280px) {
  .association_box {
    top: 28%;
  }
  .association_box .association_left {
    height: 345px;
  }
  .assistance .wipo {
    position: absolute;
    bottom: 10%;
    left: 50%;
  }
}

@media (max-width: 750px) {
  .w_600 {
    width: 100%;
  }
  .association_left {
    width: 100%;
    height: 400px;
    padding: 20px 15px;
    background: none;
    box-shadow: none;
  }
  .assistance .assistance_banner_h {
    width: 100%;
    left: 0;
  }
  .association_box {
    width: 100%;
    left: 0;
  }
  .association_right {
    width: 90%;
    margin: 130px auto 0;
  }
  .assistance img {
    width: 100%;
  }
  .assistance .assistance_banner_h p {
    width: 90%;
  }
}
</style>